<template>
	<div class="box">
		<div v-if="state.data.length > 0" class="item m-b10" v-for="(item, index) in state.data">
			<div class="title">{{ item.projectName }}</div>
			<el-progress :percentage="item.exceedNumber" color="#7D7D9A">
				<span style="cursor: default;">{{item.exceedNumber}}</span>
			</el-progress>
		</div>
		<el-empty class="empty" v-else/>
	</div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import {ElProgress } from "element-plus";
import {cockpitApi} from "@/api/investment";
import {ElEmpty} from "element-plus";

const props = defineProps({
	year:{
		type:String,
		default:()=>{
			let date = new Date(); // 获取时间
			return  date.getFullYear() // 获取年
		}
	}
});

const state = reactive({
	data: [],
});

const handel = () => {};

/**
 * 项目任务年度逾期情况
 */
const getTaskExceedTopCount = (year) => {
	cockpitApi.getTaskExceedTopCount({year:year}).then(res=>{
		if(res.code === '200'){
			state.data = res.data;
		}
	});
}

/**
 * 搜索
 */
const onSearch = () => {
	getTaskExceedTopCount(props.year);
}

defineExpose({
	onSearch
});

onMounted(() => {
	getTaskExceedTopCount(props.year);
});
</script>

<style lang="scss" scoped>
.box {
	padding: 10px 20px;
	.title {
		color: #333333;
		font-size: 12px;
	}
	overflow-x: hidden;
	overflow-y: hidden;

	.empty{
		margin-top: -30px;
	}
}
</style>
